<template>
	<view class="uni-goods-nav">
		<!-- 底部占位 -->
		<view class="uni-tab__seat" />
		<view class="uni-tab__cart-box flex">
			<view class="flex uni-tab__cart-sub-left">
				<view class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick">
					<view class="uni-tab__icon">
						<uni-icons type="trash-filled" size="20" color="#646566"></uni-icons>
					</view>
					<text class="uni-tab__text">清空</text>
				</view>
			</view>
			<view
				style="width: 60%; height: 100%; margin:auto; text-align: center; display: flex; flex-direction: column;">
				<view class="">
					<view v-if=" count == 0">
						<text>请选择比赛</text>
					</view>
					<view v-else-if=" count==1">
						<text>已选择 </text>
						<text style="color: #ff0000;">1 </text>
						<text>场比赛 </text>
						<text v-show=" isdan===false">还需再选</text>
						<text v-show=" isdan===false" style="color: #ff0000;"> 1 </text>
						<text v-show=" isdan===false">场</text>

					</view>
					<view v-else>
						<text>已选择</text>
						<text style="color: #ff0000;">{{ count}}</text>
						<text>场比赛</text>

					</view>

				</view>
				<view class="">
					<text>预测奖金仅供参考 请以实票为准</text>
				</view>
			</view>
			<view class="flex uni-tab__cart-sub-right" >
				<view :style=" count > 8 || ( count<2 &&  isdan == false) ? 'pointer-events:none;background: linear-gradient(90deg, #f04b49, #ff5500);' : 'background-image:linear-gradient(-225deg, #f04b49,#ff5500);'"
					class="flex uni-tab__cart-button-right" @click="buttonClick">
					<text style="color: #ffffff;" class="uni-tab__cart-button-right-text">提交</text>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
export default {
  name: 'footer', // 你的组件名称
  props: {
    isdan: Boolean,
    count: Number
  },
  methods: {
    onClick() {
      this.$emit('clickempty');
    },
    buttonClick() {
      this.$emit('clickbutton');
    }
  }
};
</script>
<style lang="scss" scoped>
	.flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.uni-goods-nav {
		/* 边框 */
		box-shadow:0px 5rpx 15rpx 5rpx rgba(212, 212, 212, 1);
		// border-top: 1rpx solid #aaaaaa;
		  -webkit-box-sizing: border-box; 
		  box-sizing: border-box;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
	}
	
	.uni-tab__cart-box {
		flex: 1;
		height: 50px;
		background-color: #fff;
		z-index: 900;
	}
	
	.uni-tab__cart-sub-left {
		padding: 0 5px;
	}
	
	.uni-tab__cart-sub-right {
		flex: 1;
	}
	

	
	.uni-tab__cart-button-left {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// flex: 1;
		position: relative;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 10px;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
	
	.uni-tab__icon {
		width: 18px;
		height: 18px;
	}
	

	
	.uni-tab__text {
		margin-top: 3px;
		font-size: 12px;
		color: #646566;
	}
	
	.uni-tab__cart-button-right {
		border-radius:20rpx 0 0 20rpx;
		transition: all 0.3s;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		flex: 1;
		justify-content: center;
		align-items: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
	
	.uni-tab__cart-button-right-text {
		font-size: 14px;
		color: #fff;
	}
	
	.uni-tab__cart-button-right:active {
		opacity: 0.7;
	}
	
	
	

</style>
